<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>恢复</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/frame/layui/css/layui.css" />
<link rel="icon"
	href="${pageContext.request.contextPath }/image/code.png">
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/frame/static/css/style.css">

</head>
<body class="body">

	<!-- 工具集 -->
	<div class="my-btn-box">
		<span class="fl"> <a
			class="layui-btn layui-btn-danger radius btn-delect"
			id="btn-delete-all">批量删除</a> <a class="layui-btn btn-add btn-default"
			id="btn-add">添加</a> <a class="layui-btn btn-add btn-default"
			id="btn-refresh"><i class="layui-icon">&#x1002;</i></a>
		</span> <span class="fr"> <span class="layui-form-label">搜索条件：</span>
			<div class="layui-input-inline">
				<input type="text" autocomplete="off" placeholder="请输入搜索条件"
					class="layui-input">
			</div>
			<button class="layui-btn mgl-20">查询</button>
		</span>
	</div>

	<!-- 表格 -->
	<table id="empTable" class="layui-table" lay-filter="emp_table"></table>
	<!-- 恢复员工 选择部门 -->
	<div id="re_div" style="display: none; text-align: center;">
		<div
			style="text-align: center; width: 400px; height: 200px; margin-top: 20px;">
			<form id="re_emp_form" class="layui-form" method="post"
				lay-filter="re_emp_form">
				<input id="eid_input" type="hidden" name="eid" value="${emp.eid}">

				<div class="layui-form-item">
					<label class="layui-form-label">员工姓名:</label>
					<div class="layui-input-inline">
						<input id="ename_input" type="text" name="ename"
							value="${emp.ename}" readonly="readonly" autocomplete="off"
							class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">所在部门:</label>
					<div class="layui-input-inline">
						<select id="find_Dept" name="dept.did" lay-filter="dept_id_select">
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-inline">
						<button class="layui-btn" style="margin-left: 150px;"
							lay-submit="">恢复员工</button>
					</div>
				</div>
			</form>
		</div>
	</div>
<script type="text/javascript"
		src="${pageContext.request.contextPath }/frame/layui/layui.js"></script>
<script type="text/javascript"
		src="${pageContext.request.contextPath }/js/index.js"></script>
<script type="text/javascript">
	layui.use([ 'table', 'jquery', 'form', 'layer' ],function() {
		// 操作对象
		var form = layui.form, 
		table = layui.table, 
		layer = layui.layer, 
		$ = layui.jquery;

		// 表格渲染
		var tableIns = table.render({
				elem : '#empTable' //指定原始表格元素选择器（推荐id选择器）
				,height : 500 //容器高度
				,cols : [ [//标题栏
				{
					checkbox : true,
					sort : true,
					fixed : true,
					space : true
				}, {
					field : 'eid',
					title : '编号',
					align : 'center',
					width : 60
				}, {
					field : 'ename',
					title : '员工名称',
					align : 'center',
					width : 100
				}, {
					field : 'dept',
					title : '所在部门',
					align : 'center',
					width : 100,
					toolbar : '#deptTel'
				}, {
					field : 'loginname',
					title : '登录名',
					align : 'center',
					width : 100
				}, {
					field : 'pwd',
					title : '登录密码',
					align : 'center',
					width : 100
				}, {
					field : 'sex',
					title : '员工性别',
					align : 'center',
					width : 100,
					toolbar : '#deptsex'
				}, {
					field : 'eimg',
					title : '员工头像',
					width : 100,
					align : 'center',
					templet : '#imgtmplet'
				}, {
					field : 'eflag',
					title : '员工类别',
					align : 'center',
					width : 100,
					toolbar : '#flagTel'
				}, {
					field : 'eadmin',
					title : '权限类别',
					align : 'center',
					width : 100,
					toolbar : '#adminTel'
				}, {
					fixed : 'right',
					title : '操作',
					width : 120,
					align : 'center',
					toolbar : '#barDemo'
				} //这里的toolbar值是模板元素的选择器
				] ],
				id : 'dataemp'
				,url : '${pageContext.request.contextPath }/empAction_findByPage.action?eis=0'
				,method : 'post'
				,page : true
				,limits : [ 10, 20, 30 ]
				,limit : 10 //默认采用30
				,loading : false
			});
			//发送请求数据 获取数据 添加到部门的select 标签里面
			var url = "${pageContext.request.contextPath }/deptAction_findNoAllDept.action";
			//查询没有被关联的客户
			$.post(url, {}, function(data, status) {
				//循环数组
				for (var i = 0; i < data.length; i++) {
					//获取id name
					var id = data[i].did;
					var name = data[i].dname;
					//
					$("#find_Dept").append("<option value = "+id+">" + name+ "</option>");
					form.render();
				}
			});

			//监听工具条
			table.on('tool(emp_table)', function(obj) {
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值
				var tr = obj.tr; //获得当前行 tr 的DOM对象
				if (layEvent === 'restore') {
					//绑定员工姓名 id
					$("#ename_input").val(data.ename);
					$("#eid_input").val(data.eid);
					layer.open({
						type : 2,
						title : '恢复员工',
						area : [ '450px', '300px' ],
						content : '${pageContext.request.contextPath}/empAction_findEmp.action?eid='+data.eid
					});
				}
			});
		});
	</script>

<%--图片--%>
<script type="text/html" id="imgtmplet">
    {{#  if(d.eimg !== ''){ }}
    <div><img src="{{d.eimg}}" class="layui-circle"
              style=" width: 29px;height: 29px;border: 1px solid plum;padding: 2px;"/></div>;
    {{#  } else { }}
    <div><img src="image/face1.jpg" class="layui-circle"
              style=" width: 29px;height: 29px;border: 1px solid hotpink;padding: 2px;"/></div>;
    {{#  } }}
</script>
<%--性别--%>
<script type="text/html" id="deptsex">
    {{#  if(d.sex === '男'){ }}
    <span style="color: #3523f5;">男<i class="layui-icon">&#xe662;</i></span>
    {{#  } else { }}
    <span style="color: #dd14f5;">女<i class="layui-icon">&#xe661;</i></span>
    {{#  } }}
</script>
<%--员工级别--%>
<script type="text/html" id="flagTel">
    {{#  if(d.eflag === 0 ){ }}
    <span style="color: #000;">普工</span>
    {{#  } else { }}
    <span style="color: #F581B1;">部门主管</span>
    {{#  } }}
</script>
<%--员工操作级别--%>
<script type="text/html" id="adminTel">
    {{#  if(d.eadmin === 0 ){ }}
    <span style="color: #000;">普通操作者</span>
    {{#  } else { }}
    <span style="color: #F581B1;">部门主管</span>
    {{#  } }}
</script>
<%--部门--%>
<script type="text/html" id="deptTel">
    {{#  if(d.dept === null){ }}
    <span style="color: #f5120c;">待议</span>
    {{#  } else { }}
    <span style="color: #000;">{{d.dept.dname}}</span>
    {{#  } }}
</script>
<!-- 表格操作按钮集 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-mini layui-btn-normal" lay-event="restore">恢复</a>
</script>
</body>
</html>